/**
`useState`  是 React 中的一个 Hook，用于在函数组件中添加状态管理。
  1. 基本概念
  -  `useState`  是 React 提供的 Hook 之一，允许函数组件管理局部状态。
  - 它返回一个数组，数组的第一个元素是当前状态，第二个元素是更新状态的函数。

  2. 使用方式
   1. 引入  `useState` 
  首先需要从 React 中引入  `useState` ：
  import React, { useState } from 'react';
   2. 初始化状态

  使用  `useState`  来初始化状态。可以传入初始值作为参数。
  const [count, setCount] = useState(0); // 初始化 count 为 0
   3. 更新状态

  可以通过调用更新状态的函数来更新状态。例如，在按钮点击时更新状态：
  const increment = () => {
    setCount(count + 1); // 更新 count
  };
   示例代码
  import React, { useState } from 'react';

  const Counter = () => {
    const [count, setCount] = useState(0); // 初始化状态

    return (
      <div>
        <h1>{count}</h1>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <button onClick={() => setCount(count - 1)}>Decrement</button>
      </div>
    );
  };

  export default Counter;
  3. 注意事项
  - 异步更新： `setCount`  是异步的，多个状态更新可能会合并，因此在更新状态时要注意使用函数式更新：
  setCount(prevCount => prevCount + 1);
  - 初始状态：如果初始状态依赖于复杂计算，可以传入一个函数作为参数，只有在第一次渲染时执行：
  const [count, setCount] = useState(() => {
      return someExpensiveComputation();
    });

  4. 总结
  `useState`  是 React 中一个非常重要的 Hook，它使得函数组件能够管理和更新状态。通过简单的 API， `useState`  提供了清晰的方式来处理组件的局部状态，适合用于各种交互和动态数据的管理。理解和掌握  `useState`  是学习 React 的基础之一。
 */
import React, { memo, useState } from 'react'

const App = memo(() => {
  const [message, setMessage] = useState('Hello useState')
  
  function changeMessage() {
    setMessage('Hello changeMessage useState')
  }
  
  return (
    <div>
      <h2>{message}</h2>
      <button onClick={changeMessage}>change message</button>
    </div>
  )
})

export default App